<template>
    <div class="account">
        <m-cell value="更多" @click.native="goto('/account/profile')" is-link>
            <div class="account-private">
                <div class="avatar">
                    <img :src="userInfo.avatar | staticSourceFilter">
                </div>
                <div class="name">
                    <div class="name-wrap">
                        <span>{{userInfo.realName === null ? '未认证' : userInfo.realName}}</span>
                        <span>昵称：{{userInfo.nickName}}</span>
                    </div>
                </div>
            </div>
        </m-cell>
        <m-sheet-group>
            <m-cell title="账户安全" value="密码/支付等管理" @click.native="goto('/account/safety')" is-link></m-cell>
            <m-cell title="关联帐号" @click.native="goto('/account/links')" is-link></m-cell>
            <m-cell title="地址管理" @click.native="goto('/account/address')" is-link></m-cell>
        </m-sheet-group>
        <m-sheet-group>
            <m-cell title="设置" is-link></m-cell>
            <m-cell title="定制" is-link></m-cell>
        </m-sheet-group>
        <div class="account-logout">
            <m-button value="退出登录" @click.native="exit" is-link></m-button>
        </div>
    </div>
</template>

<script>
	export default {
		methods: {
			exit () {
				localStorage.clear();
				this.$store.dispatch('clearUserInfo');
				this.$store.dispatch('clearUserCart');
				this.$mToast('注销成功');
				this.goto('/login')
			}
		}
	}
</script>

<style lang="less" scoped>
    .account {
        .account-private {
            display: flex;
            width: 100%;
            height: 70px;
            .avatar {
                flex-basis: 40%;
                height: 70px;
                line-height: 70px;
                text-align: center;
                img {
                    height: 50px;
                    width: 50px;
                    vertical-align: middle;
                }
            }
            .name {
                flex: 1;
                display: flex;
                font-size: 16px;
                .name-wrap {
                    flex-grow: 0;
                    margin: auto;
                    span {
                        display: block;
                        font-size: 14px;
                    }
                }
            }
        }
        .account-logout {
            margin-top: 50px;
        }
    }
</style>
